{% set isNarrow = true %}

{% extends "./layout/layout.html" %}

{% block content %}

<h1>&nbsp;注册</h1>

<div class="container">
  {% if isLogin %}
  <p>欢迎{{userName}},您已登录,不需要注册,请返回<a href="/">首页</a></p>
  {% else %}
  <hr>
  <form>
    <div class="form-group">
      <label for="input-username">用户名</label>
      <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
      <p class="username-info"></p>
    </div>
    <div class="form-group">
      <label for="input-password">密码</label>
      <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <label for="repeat-input-password">确认密码</label>
      <input type="password" class="form-control" id="repeat-input-password" placeholder="请重新输入密码">
      <p class="password-info"></p>
    </div>
    <div class="form-group">
      <label for="select-gender">性别</label>
      <select class="form-control" id="select-gender">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">保密</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary register">注册</button>
    <a href="/login">已有账返回登录>></a>
  </form>
  {% endif %}
</div>

{% endblock %}


{% block js %}
<script>
  let usernameTimeoutId;
  let passwordTimeoutId;
  let isPasswordSame = false;
  let isUsernameExist = true;

  // 监听用户名是否存在
  $("#input-username").on("input", function () {
    // 做一个防抖
    if (usernameTimeoutId) {
      clearTimeout(usernameTimeoutId);
    }

    usernameTimeoutId = setTimeout(function () {
      const userName = $("#input-username").val();
      ajax.post("/api/user/isExist", { userName }, function (err, data) {
        if (err) {
          $(".username-info").text("用户名可用")
          isUsernameExist = false;
          return;
        }
        $(".username-info").text("用户名已存在")
        isUsernameExist = true;
      })
    }, 500)
  })
  //     $.ajax({
  //       type: "post",
  //       url: "/api/user/isExist",
  //       data: { userName },
  //       success: function (result) {
  //         console.log(result)
  //         if (result.errno === 0) {
  //           $(".username-info").text("用户名已存在")
  //           isUsernameExist = true;
  //         } else {
  //           $(".username-info").text("用户名可用")
  //           isUsernameExist = false;
  //         }
  //       },
  //       error: function (err) {
  //         console.log(err)
  //       }
  //     })


  // 监听密码是否一致
  $("#repeat-input-password").on("input", function () {

    if (passwordTimeoutId) {
      clearTimeout(passwordTimeoutId)
    }
    passwordTimeoutId = setTimeout(function () {
      // 获取密码
      const password = $("#input-password").val();
      const repeatInputPassword = $("#repeat-input-password").val();

      if (password === repeatInputPassword) {
        $(".password-info").text("两次密码一致")
        $(".password-info").css({ color: "green" })
        isPasswordSame = true;
      } else {
        $(".password-info").text("两次密码不一致")
        $(".password-info").css({ color: "red" })
        isPasswordSame = false;
      }
    }, 500)
  })


  // 注册事件
  $(".register").click(function (e) {
    //阻止表单提交的默认行为
    e.preventDefault();

    // 判断用户名是否存在
    if (isUsernameExist) {
      alert("用户名已存在,请输入新的用户名！");
      return;
    }

    // 如果两次密码不一致
    if (!isPasswordSame) {
      alert("两次密码不一致,请重新输入！");
      return;
    }

    //获取用户名 密码 性别
    const userName = $("#input-username").val();
    const password = $("#input-password").val();
    const gender = parseInt($("#select-gender").val());
    ajax.post("/api/user/register", { userName, password, gender }, function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      location.href = "/login"
    });
    // $.ajax({
    //   type: "post",
    //   url: "/api/user/register",
    //   contentType: "application/json;charset=utf-8",
    //   // JSON.parse() 将json格式的字符串转换为js对象
    //   // JSON.stringify() 将对象转换为json格式的字符
    //   data: JSON.stringify({ userName, password, gender }),
    //   success: function (result) {
    //     console.log(result)
    //     if (result.errno === 0) {
    //       location.href = "/login"
    //     } else {
    //       alert(result.message)
    //     }
    //   },
    //   error: function (err) {
    //     console.log(err)
    //     alert("注册失败")
    //   }
    // })
  })
</script>
{% endblock %}